<template>
    <div style="position: fixed;top: 0;right: 0;z-index: 99;display: flex;">
        <div class="statusImg" :class="['status_' + status]"></div>
<!-- 运行       -->
        <div  class="statusImg status_RUNNING"></div>
        <div  class="statusImg status_DRAFTED"></div>
        <div  class="statusImg status_SUCCESS_END"></div>
        <div  class="statusImg status_CANCEL"></div>
        <div  class="statusImg status_DELETE"></div>

        <div  class="statusImg status_ABORT_END"></div>
        <div  class="statusImg status_ERROR_END"></div>

        <div  class="statusImg status_SUBMIT"></div>
        <div  class="statusImg status_LOCKED"></div>
        <div  class="statusImg status_SUPSPEND"></div>
        <div  class="statusImg status_PENDING"></div>
    </div>

</template>

<script>
export default {
    name: "BpmStatus",
    props:{
        status
    },
}
</script>

<style scoped>
.statusImg{
    width: 120px;
    height:107px;
}
.status_RUNNING{
    background:url('processStatus.png') no-repeat scroll -240px 0px;
}
.status_DRAFTED{
    background:url('processStatus.png') no-repeat scroll -120px 0px;
}
.status_SUCCESS_END{
    background:url('processStatus.png') no-repeat scroll 0px 0px;
}
.status_CANCEL{
    background:url('processStatus.png') no-repeat scroll -120px -110px;
}
.status_DELETE{
    background:url('processStatus.png') no-repeat scroll -240px -220px;
}
.status_ABORT_END,.status_ERROR_END{
    background:url('processStatus.png') no-repeat scroll -240px -110px;
}
.status_SUBMIT{
    background:url('processStatus.png') no-repeat scroll -120px -220px;
}
.status_LOCKED{
    background:url('processStatus.png') no-repeat scroll 0px -220px;
}
.status_SUPSPEND{
    background:url('processStatus.png') no-repeat scroll 0px -110px;
}
.status_PENDING{
    background:url('processStatus.png') no-repeat scroll 0px -330px;
}
</style>